<!--
 * @Author: maly
 * @Date: 2022-01-17 10:27:10
 * @LastEditTime: 2022-08-08 10:43:36
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @Description: 公示板组件
 * @FilePath: \code\ctp-static-portal-front\src\components\publicBoard\index.vue
-->
<template>
  <div :style="styleOptions" id="isSocialEl">
    <div v-html="sectionData.data.html" class="board-content" v-show="isSocial"></div>
    
     <div class="main" v-show="!isSocial">
        <div class="messageButton" id="messageButton" @click="messageDialog()">
            <span>我要留言</span><img src="/seeyon/portal/images/logo/liuyan.png" alt="">
        </div>
    </div>
    <div  id="msgSucc">留言成功！2秒后关闭</div>
  </div>
</template>
<script>
  import { methods } from '@/utils';
  export default {
    name: 'PublicBoard',
    props: {
      withBorder: {
        type: Boolean,
        default: false,
      },
      sectionData: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        ismsgSucc:false,
        isSocial: true,
      };
    },
    
    computed: {
      styleOptions() {
        let style = {
          // boxSizing: 'border-box',
          height: `${methods.getContentHeight(this.sectionData.options)}px`,
          backgroundColor: `${this.sectionData.options.backgroundColor}`,
        };
        if (!this.withBorder) {
          style.padding = '10px 15px';
        }
        return style;
      },
    },
    mounted() {
     var ele = document.getElementById('isSocialEl').parentNode.parentNode.parentNode.firstChild.firstChild.firstChild.innerText
      if(ele == '社会监督'){
        this.isSocial = false
      }
    },
    methods: {
      messageDialog() {
        var that = this
        var dialog = top.$.dialog({
            id: 'url',
            url: '/seeyon/socialSupervision.do?method=leaveWord',
            width: 550,
            height: 500,
            title: '我要留言',
            checkMax: true,
            closeParam: {
                'show': true,
                autoClose: false
            },
            buttons: [
                {
                    text: "确定",
                    handler: function () {
                        dialog.startLoading()
                        var returnValue = dialog.getReturnValue()
                        if (!returnValue) {
                            return
                        }
                        $.ajax({
                            url: '/seeyon/socialSupervision.do?method=startMessageSummary',
                            type: 'post',
                            async: true,
                            data: returnValue,
                            success(res) {
                              console.log('res :>> ', res);
                                if (res == 'true') {
                                    // TODO: 提示用户留言成功
                                    // alert('留言成功')
                                    that.showTips()
                                   
                                 
                                    setTimeout(() => {
                                      document.getElementById('msgSucc').style.display = 'none'
                                    dialog.close();

                                    }, 2000);
                                }
                            }
                        })
                    }
                },
                {
                    text: "取消",
                    handler: function () {
                        dialog.close();
                    }
                }
            ]
        })
      },
      showTips(){

        var msgSucc =  document.getElementById('msgSucc')
        msgSucc.style.display = 'block'
      
        msgSucc.style.left = '43%'
        
        // console.log('object :>> ',  document.getElementById('msgSucc'));
        const rollDom = document.getElementById('msgSucc')　　// 获取想要滚动的dom元素
        rollDom.scrollIntoView({ block: 'center' })　　//　通过scrollIntoView方法滚动到可视窗口中间

      }
    },
  };
</script>
<style scoped lang="scss">
#mask-msg{
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

#msgSucc{
  display: none;
  color: #fff;
    position: absolute;
    // top: 100px;
    left: 800px;
    width: 300px;
    height: 100px;
    background-color: gray;
    font-size: 20px;
    line-height: 100px;
    text-align: center;
    border-radius: 10px;
    z-index: 9999;
    animation: 1s;
}
  .board-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    line-height: normal;
    color: #111;

    &:hover {
      overflow: auto;
    }

    /* 设置容器的滚动条样式 */
    &::-webkit-scrollbar {
      /* 滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1） */
      width: 4px;
      height: 4px;
    }

    &::-webkit-scrollbar-button {
      /* 滚动条两端的按钮（位置2） */
      display: none;
    }

    &::-webkit-scrollbar-track-piece {
      /* 内层轨道，滚动条中间部分（位置4） */
      width: 8px;
      background-color: #f5f5f5;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb {
      /* 滚动条里面可以拖动的那部分（位置5） */
      height: 50px;
      background: #bec7d5;
      border-radius: 6px;
    }
  }

  /* 这个好像全局的table都有这个样式,考虑写到全局样式表里去 */

  ::v-deep table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  ::v-deep .board-content p {
    padding: 0;
    margin: 0;
    clear: both;
    line-height: 180%;
    word-break: normal;
  }

        .main{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .messageButton{
            border: 1px solid gray;
            display: flex;
            align-items: center;
            width: 130px;
            justify-content: space-evenly;
            padding: 5px;
            cursor: pointer;
        }
        .messageButton:hover{
          color: #0078d4;
        }
        .messageButton img{
            width: 30px;
        }
</style>
